<template>
  <div class="app-container">
    <div class="module-box">
      <div class="module-item">
        <div class="module-item-title">
          <span class="tit">基本信息</span>
        </div>
        <div class="form module-item-content" style="padding-top:35px;overflow: hidden;">
          <el-form v-if="validateForm" ref="validateForm" label-position="right" label-width="230px">
            <el-col :span="12">
              <el-form-item label="项目编号：">
                <el-input readonly :value="validateForm.number" />
              </el-form-item>
              <el-form-item label="所属区县：">
                <el-input readonly :value="validateForm.districts.join(',')" />
              </el-form-item>
              <el-form-item label="行政村：">
                <el-input readonly :value="validateForm.villages.join(',')" />
              </el-form-item>
              <el-form-item label="指标使用方向：">
                <el-input readonly :value="validateForm.projectIndex.name" />
              </el-form-item>
              <el-form-item label="项目类型：">
                <el-input readonly :value="validateForm.projectType.name" />
              </el-form-item>
              <el-form-item label="土地使用权面积：">
                <el-input readonly :value="validateForm.landArea">
                  <span slot="suffix">公顷</span>
                </el-input>
              </el-form-item>
              <el-form-item label="土地利用规划名称：">
                <el-input readonly :value="validateForm.landUtilizePlanName" />
              </el-form-item>
              <el-form-item label="土地整治规划名称：">
                <el-input readonly :value="validateForm.landRepairPlanName" />
              </el-form-item>
              <el-form-item label="乡镇建设规划名称：">
                <el-input readonly :value="validateForm.townConstructPlanName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目名称：">
                <el-input readonly :value="validateForm.name" />
              </el-form-item>
              <el-form-item label="主要乡镇：">
                <el-input readonly :value="validateForm.mainTowns.join(',')" />
              </el-form-item>
              <el-form-item label="项目级别">
                <el-input readonly :value="validateForm.levelDto.name" />
              </el-form-item>
              <el-form-item label="是否涉及户改：">
                <el-input readonly :value="validateForm.isReformDto.name" />
              </el-form-item>
              <el-form-item label="是否涉及土地利用现状变更：">
                <el-input readonly :value="validateForm.isChangeDto.name" />
              </el-form-item>
              <el-form-item label="是否为高山生态扶贫搬迁项目：">
                <el-input readonly :value="validateForm.isPovertyDto.name" />
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>

      <div class="module-item">
        <div class="module-item-title">
          <span class="tit">片块</span>
        </div>
        <div class="module-item-content" style="padding-top:35px;overflow: hidden;">
          <el-table :data="pkSelectedData" highlight-current-row>
            <el-table-column prop="applicantName" label="权利人"></el-table-column>
            <el-table-column label="乡镇名称">
              <template slot-scope="scope">{{ scope.row.townName }}</template>
            </el-table-column>
            <el-table-column label="行政村名称">
              <template slot-scope="scope">{{ scope.row.villageName }}</template>
            </el-table-column>
            <el-table-column prop="address" label="通讯地址"></el-table-column>
            <el-table-column prop="landArea" label="使用权面积（㎡）"></el-table-column>
            <el-table-column label="片块编号" width="200px">
              <template slot-scope="scope">
                <span>{{scope.row.landName}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryDetailById } from "@/api/project/xmkgh/xmprezz";

export default {
  data() {
    return {
      validateForm: null,
      param: null, // 路由参数
      pkSelectedData: []
    };
  },
  watch: {},
  created() {
    this.param = this.$route.query;
    this.handleDetail();
  },
  methods: {
    handleDetail() {
      queryDetailById({
        projectId: this.param.projectId
      }).then(res => {
        this.validateForm = res.data;
        this.pkSelectedData = res.data.projectLands;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.module-item {
  width: 100%;
  background-color: #fff;
}

.module-item-title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  font-size: 14px;
  color: #48494d;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}

.module-item-content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}

.form {
  /deep/ .el-input {
    width: 200px;
  }
}

.submit-box {
  text-align: center;
  margin-top: 20px;
}
</style>
 